<template>
  <div class="event-host">
    <div class="title">Event Host</div>
    <img src="@/assets/images/event1.png" alt="" class="host-img">
    <div class="sub-title">PARTNERS</div>
    <img src="@/assets/images/event2.png" alt="" class="host-img2">
    <img src="@/assets/images/m_event2.png" alt="" class="host-img2_m">
    <div class="sub-title">SUPPORTED BY</div>
    <img src="@/assets/images/event3.png" alt="" class="host-img2">
    <img src="@/assets/images/m_event3.png" alt="" class="host-img2_m">
  </div>
</template>

<style lang="scss" scoped>
  .event-host{
    text-align: center;
    .title{
      color: #5CD848;
      font-size: 90px;
      line-height: 108px;
      font-family: poppins-bold;
    }
    .host-img{
      width: 100%;
      margin-top: 80px;
    }
    .sub-title{
      color: #5CD848;
      font-size: 40px;
      line-height: 48px;
      margin-top: 80px;
    }
    .host-img2{
      width: 100%;
      margin-top: 38px;
    }
    .host-img2_m{
      display: none;
    }
  }
  @media screen and (max-width: 1180px) {
    .event-host{
      margin-top: 50px;
      .title{
        font-size: 32px;
        line-height: 38px;
      }
      .host-img{
        width: 100%;
        margin-top: 27px;
      }
      .sub-title{
        color: #5CD848;
        font-size: 16px;
        line-height: 19px;
        margin-top: 30px;
      }
      .host-img2{
        display: none;
      }
      .host-img2_m{
        display: block;
        width: 100%;
        margin-top: 14px;
      }
    }
  }
</style>